import {
  DomEditor,
  IDomEditor,
  SlateRange,
  IButtonMenu
} from '@wangeditor/editor'
import axios from '@/utils/request'

type AttachmentElement = {
  type: 'attachment'
  fileName: string
  link: string
  children: EmptyText[]
}

type EmptyText = {
  text: ''
}

class PreviewFileMenu implements IButtonMenu {
  title: string
  iconSvg: string
  tag: string

  constructor() {
    this.title = '预览' // 自定义菜单标题
    this.iconSvg =
      '<svg t="1660638399154" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2423" width="16" height="16"><path d="M607.839811 895.957102H214.69447A86.82497 86.82497 0 0 1 127.880338 809.070721V214.784781A86.839419 86.839419 0 0 1 214.69447 127.880338h594.28594a86.33729 86.33729 0 0 1 61.436749 25.456857c16.400473 16.400473 25.362934 38.208767 25.373771 61.411462L894.439878 607.821749v0.10476a32.031496 32.031496 0 0 0 64.059379 0.101149L959.825022 214.889542v-0.104761A150.775976 150.775976 0 0 0 808.98041 63.940169H214.69447A150.638703 150.638703 0 0 0 63.940169 214.784781v594.28594a150.638703 150.638703 0 0 0 150.757914 150.82655h393.141728a31.970084 31.970084 0 0 0 0-63.940169z" fill="" p-id="2424"></path><path d="M950.544667 905.331381l-122.071536-122.071536a192.217875 192.217875 0 1 0-45.213286 45.213286l122.071536 122.071536a31.970084 31.970084 0 0 0 45.213286-45.213286z m-278.547941-105.302594a128.028448 128.028448 0 1 1 90.531332-37.497116 127.193975 127.193975 0 0 1-90.527719 37.497116zM768.004516 352.212795c17.653989 0 31.966472-14.402794 31.970084-32.056783s-14.308871-32.074845-31.966472-32.078457L256.002709 287.911382a32.020659 32.020659 0 0 0-31.970084 32.024271c0 17.657601 14.308871 32.092907 31.966472 32.092908L768.004516 352.212795zM448.000226 544.033302a31.96286 31.96286 0 1 0 0-63.940169h-192.001129a31.937573 31.937573 0 1 0 0 63.878758l192.001129 0.061411zM256.017159 671.91364a31.959247 31.959247 0 1 0 0 63.922107l127.999549 0.018062a31.941185 31.941185 0 1 0 0-63.878757z" fill="" p-id="2425"></path></svg>'
    this.tag = 'button'
  }

  private getSelectedElem(editor: IDomEditor): AttachmentElement | null {
    const node = DomEditor.getSelectedNodeByType(editor, 'attachment')
    if (node == null) return null
    return node as AttachmentElement
  }

  private preview(editor, url: string, name: string) {
    // 替换url
    const token = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJubmpjZmoiLCJzY29wZSI6WyJiaXpfc3lzIiwiYmlnX3NjcmVlbiIsInNlcnZlciIsImFsbCJdLCJkZXRhaWwiOnsiaWQiOjgzNjkxMzg3Mjg2MzYzNzUwNCwib3JnSWQiOjE1OTI2NDM3NzQsImNvcnBJZCI6bnVsbCwidXNlcm5hbWUiOiJubmpjZmoiLCJyZWFsTmFtZSI6IuWNl-WugeW4guW4guWcuuebkeedo-euoeeQhuWxgCIsInBhc3N3b3JkIjpudWxsLCJlbmFibGVkIjp0cnVlLCJhcmVhSWQiOjQ1MDEwMCwiYXJlYUxldmVsIjoyLCJvcmdUeXBlIjpudWxsLCJvcmdDb2RlIjoiIiwiZm9yZWlnblVzZXJJZCI6bnVsbCwibGV2ZWwiOm51bGwsInBob25lIjoiMTgzNzM4MTY2ODciLCJyb2xlRmxhZyI6MCwidXNlclR5cGUiOjIsInJvbGVDb2RlTGlzdCI6WyJSMDA1Il0sImF1dGhvcml0aWVzIjpbeyJhdXRob3JpdHkiOiJSMDA1In1dLCJhY2NvdW50Tm9uRXhwaXJlZCI6dHJ1ZSwiY3JlZGVudGlhbHNOb25FeHBpcmVkIjp0cnVlLCJhY2NvdW50Tm9uTG9ja2VkIjp0cnVlfSwiZXhwIjoxNjYxNzgwNTI2LCJhdXRob3JpdGllcyI6WyJSMDA1Il0sImp0aSI6ImQyMWYxZTNhLWJiNWMtNDMxZC1iODI0LTc4MTdjZDdhMWMwMSIsImNsaWVudF9pZCI6Im5pcHZ0LWFwcCJ9.UwKREujwIG_9esRoBj5v69y0tTEwfp83BbYzqvApStM`
    axios({
      method: 'get',
      url: `/biz/plan/getAttachmentUrl?${url}&token=${token}`,
      responseType: 'blob'
    })
      .then((res) => {
        const blob = new Blob([res.data], { type: 'application/pdf' })
        editor.emit('previewFile', {
          url: window.URL.createObjectURL(blob),
          name: name
        })
      })
      .catch(() => {
        editor.emit('previewFile', false)
      })
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor: IDomEditor): string | boolean {
    const attachmentElem = this.getSelectedElem(editor)
    console.log(attachmentElem)

    if (attachmentElem == null) return ''
    return (
      attachmentElem.link.split('pdfPath=')[1] + ',' + attachmentElem.fileName
    )
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor: IDomEditor): boolean {
    return false
  }

  exec(editor: IDomEditor, value: string | boolean) {
    if (!value) return
    if (typeof value !== 'string') return
    this.preview(editor, value.split(',')[0], value.split(',')[1])
  }

  isDisabled(editor: IDomEditor): boolean {
    const { selection } = editor
    if (selection == null) return true
    if (SlateRange.isExpanded(selection)) return true // 选区非折叠，禁用

    // 未匹配到 attachment node 则禁用
    const attachmentElem = this.getSelectedElem(editor)
    if (attachmentElem == null) return true

    return false
  }
}

const PreviewFileMenuConf = {
  key: 'previewFile', // 定义 menu key
  factory() {
    return new PreviewFileMenu()
  }
}

export default PreviewFileMenuConf
